---
import { Icon } from '@astrojs/starlight/components';
---

<div class="read-more">
	<Icon class="icon" name="open-book" />
	<span><slot /></span>
</div>

<style>
	.read-more {
		display: flex;
		gap: 0.5rem;
		align-items: flex-start;
	}
	.icon {
		--icon-size: 1.5rem;
		font-size: var(--icon-size);
		flex-shrink: 0;
		/* Align to the middle of the first line of text. */
		margin-block: calc((var(--sl-line-height) * 1rem - var(--icon-size)) / 2);
		color: var(--sl-color-text-accent);
	}
</style>
